<template>
  <div class="trading-area">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>商圈管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item class="area"
          :required="true">
          <el-cascader :options="cities"
            @change="areaChange"
            clearable
            placeholder="请选择区域"
            style="width:300px"
            :props="{ value: 'id', label: 'city', children: 'citiess' }"
            v-model="city">
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入名称或编号"
            v-model="search"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            @click="_reset"
            size="small"
            style="width:60px">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary"
            @click="_add"
            size="small"
            style="width:60px">
            新增
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-table class="easy-table"
            :data="tradingAreas"
            max-height="550">
            <el-table-column prop="id"
              label="编号">
            </el-table-column>
            <el-table-column prop="createTime"
              label="创建日期">
            </el-table-column>
            <el-table-column prop="name"
              label="商圈名称">
            </el-table-column>
            <el-table-column prop="area"
              label="行政区">
            </el-table-column>
            <el-table-column prop="remark"
              label="备注">
            </el-table-column>
            <el-table-column label="操作"
              width="300">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="look(scope.row.id)">查看详情</el-button>
                <el-button type="text"
                  size="small"
                  @click="_edit(scope.row)">修改</el-button>
                <el-button type="text"
                  size="small"
                  @click="_delete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="fr">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
    <!-- 查看详情 -->
    <el-dialog title="商圈详情"
      :visible.sync="dialogVisible_1"
      width="600px">
      <el-form label-width="100px"
        class="detail">
        <p>
          <span>
            <label>编号：</label>{{areaDetail.id}}</span>
        </p>
        <p>
          <span>
            <label>名称：</label>{{areaDetail.name}}</span>
        </p>
        <p>
          <span>
            <label>行政区：</label>{{areaDetail.area}}</span>
        </p>
        <p>
          <span>
            <label>中心坐标：</label>x={{areaDetail.x}}</span>&nbsp;&nbsp;
          <span>y={{areaDetail.y}}</span>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
          <span>
            <label>半径：</label>{{areaDetail.radii}} </span>
        </p>
        <p>
          <span>
            <label>创建人：</label>{{areaDetail.userName}}</span>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
          <span>
            <label>创建人ID：</label>{{areaDetail.operatorId}}</span>
        </p>
        <p>
          <span>
            <label>创建时间：</label>{{areaDetail.createTime}}</span>
        </p>
        <p>
          <span>
            <label>标签：</label>{{areaDetail.label}}</span>
        </p>
        <p>
          <span>
            <label>备注：</label>{{areaDetail.remark}}</span>
        </p>
        <p>
          <span>
            <label>修改记录：</label>
          </span>
          <el-table :data="areaDetail.logs">
            <el-table-column label="修改人ID"
              prop="operatorId"></el-table-column>
            <el-table-column label="修改人姓名"
              prop="name"></el-table-column>
            <el-table-column label="修改时间"
              prop="updateTime"></el-table-column>
            <el-table-column label="修改项目"
              prop="content"></el-table-column>
          </el-table>
        </p>

      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible_1 = false"
          type="primary">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 新增修改 -->
    <el-dialog :title="title"
      v-if="dialogVisible_2"
      :visible.sync="dialogVisible_2"
      width="600px">
      <el-form label-width="100px"
        :model="form"
        :rules="rules"
        ref="form">
        <el-form-item label="商圈名称："
          prop="name">
          <el-input placeholder="请输入商圈名称"
            v-model="form.name"
            maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="行政区："
          prop="areaId">
          <el-cascader :options="cities"
            clearable
            placeholder="请选择区域"
            style="width:300px"
            @change="_areaChange"
            :props="{ value: 'id', label: 'city', children: 'citiess' }"
            v-model="city_">
          </el-cascader>
        </el-form-item>
        <el-form-item label="中心点x(经度)："
          prop="x">
          <el-input-number v-model="form.x"
            controls-position="right"
            :min="0"
            :precision="6"></el-input-number>
        </el-form-item>
        <el-form-item label="中心点y(纬度)："
          prop="y">
          <el-input-number v-model="form.y"
            controls-position="right"
            :min="0"
            :precision="6"></el-input-number>
        </el-form-item>
        <el-form-item label="半径（km）:"
          prop="radii">
          <el-input-number v-model="form.radii"
            controls-position="right"
            :min="0"
            :precision="1"
            :max="1000"></el-input-number>
        </el-form-item>
        <el-form-item label="标签">
          <el-input placeholder="请输入标签，多个标签用逗号隔开"
            v-model="form.label"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input placeholder="请输入备注信息"
            type="textarea"
            v-model="form.remark"
            rows="6"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible_2 = false">取消</el-button>
        <el-button type="primary"
          @click="addEditSure('form')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const cityData = require("@/data/editCities.json");
import {
  getTradingAreaList,
  deleteTradingArea,
  lookTradingArea,
  updateTradingArea
} from "@/public/js/tradingArea";
export default {
  components: {},
  props: {},
  data() {
    return {
      cities: cityData.provincesEntities,
      city: [],
      city_: [],
      pageNo: 1,
      pageSize: 10,
      areasId: "",
      search: "",
      total: 0,
      tradingAreas: [],
      dialogVisible_1: false,
      dialogVisible_2: false,
      areaDetail: {},
      title: "新增",
      form: {
        id: "",
        name: "",
        areaId: "",
        x: undefined,
        y: undefined,
        radii: undefined,
        label: "",
        remark: ""
      },
      rules: {
        name: [{ required: true, message: "请输入商圈名称", trigger: "blur" }],
        areaId: [
          { required: true, message: "请选择行政区域", trigger: "change" }
        ],
        x: [{ required: true, message: "请输入中心点经度x坐标", trigger: "blur" }],
        y: [{ required: true, message: "请输入中心点纬度y坐标", trigger: "blur" }],
        radii: [{ required: true, message: "请输入商圈半径", trigger: "blur" }]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    _getTradingAreaList() {
      getTradingAreaList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        areasId: this.areasId,
        search: this.search
      }).then(res => {
        this.total = res.data.total;
        this.tradingAreas = res.data.tradingAreas;
      });
    },
    _reset() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.city_ = [];
      this._getTradingAreaList();
    },
    //区域查询
    areaChange(area) {
      this.areasId = area[area.length - 1];
      this._reset();
    },
    //查看详情
    look(id) {
      lookTradingArea({ id }).then(res => {
        this.areaDetail = res.data.info;
        this.dialogVisible_1 = true;
      });
    },
    //新增
    _add() {
      this.title = "新增";
      this.dialogVisible_2 = true;
      this.form = {
        id: "",
        name: "",
        areaId: "",
        x: undefined,
        y: undefined,
        radii: undefined,
        label: "",
        remark: ""
      };
      this.city_ = [];
    },
    //编辑
    _edit(row) {
      this.title = "编辑";
      this.dialogVisible_2 = true;
      let { id, name, areaId, x, y, radii, label, remark, areas } = row;
      this.form = {
        id,
        name,
        areaId: areas[areas.length - 1],
        x,
        y,
        radii,
        label,
        remark
      };
      this.city_ = areas;
    },
    //删除
    _delete(id) {
      this.$confirm("是否继续该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteTradingArea({ id: id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this._getTradingAreaList();
          }
        });
      });
    },
    _areaChange(area) {
      this.form.areaId = area[area.length - 1];
    },
    //新增编辑保存
    addEditSure(fromName) {
      console.log(this.form);
      this.$refs[fromName].validate(valid => {
        if (valid) {
          updateTradingArea(this.form).then(res => {
            if (!res.data.errCode) {
              this.$message.success("操作成功");
              this.dialogVisible_2 = false;
              this._reset();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getTradingAreaList();
    },
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this._getTradingAreaList();
    }
  },
  created() {
    this._getTradingAreaList();
    console.log(cityData);
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.trading-area {
  .detail {
    p {
      line-height: 36px;
    }
    label {
      font-weight: bold;
    }
  }
}
</style>